<template>
    <div class="app-main">
        <myheader title="授权购买"/>
        <div style="border-bottom: 1px solid #eee;margin-top: 20px;margin-left: 2px;">
            <div>
                <el-radio v-model="calculate.select" label="0" border class="buy_type">授权购买</el-radio>
                <el-radio v-model="calculate.select" label="1" border class="buy_type">业主购买</el-radio>
            </div>
            <mt-radio
                    title="请选择购买年限"
                    align="right"
                    v-model="calculate.id"
                    :options="options">
            </mt-radio>
        </div>
        <div class="amount" v-if="calculate.select=='0'">
            <mt-field type="number" label="授权人数" placeholder="请输入人数" v-model="calculate.amount"></mt-field>
        </div>
        <div class="total">合计:<span style="color: red;">{{total}}</span>元</div>

        <mt-button type="primary" class="bottom_btn">确定支付</mt-button>
    </div>
</template>

<script>


    export default {
        name: 'buy',
        data() {
            return {
                calculate: {
                    select: "0",
                    id: "",//通过id到后台查询记录
                    amount: ""
                },
                total: 0,
                priceInfos: [],
                options: []
            }
        },
        watch: {
            'calculate.select'(val){
                this.refreshOptions(val)
            },
            calculate: {
                handler(newValue, oldValue) {
                },
                deep: true
            }
        },
        methods: {
            refreshOptions(val){
                if (!val) val = "0"
                this.$ajax.get("/mdmDictItemApiController/getBuyInfo", {type: this.calculate.select}, result => {
                    this.options = result.nameList
                    this.priceInfos = result.valueList
                })
            }
        },
        mounted: function () {
            this.refreshOptions()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .buy_type {
        width: 163px;
        margin: 10px;
    }

    .amount {
        font-size: 12px;
        color: #888;
        border-bottom: 1px solid #eee;
    }

    .mint-cell-title {
        font-size: 12px;
        color: #888;
    }

    .bottom_btn {
        position: absolute;
        bottom: 0px;
        width: 98%;
        left: 1%;
        bottom: 4px;
    }

    .total {
        text-align: right;
        margin-top: 60px;
        margin-right: 30px;
        font-size: 14px;
    }
</style>
